<template>
  <div>
    <div class="cont">
      <input class="inp" v-model="ele" type="text" placeholder="角色名称" />
      <el-button @click="search()">搜索</el-button>
      <!-- 上方按钮 -->
      <div class="top">
        <button @click="dialogFormVisible1 = true">新增</button>
        <!-- <button>修改</button> -->
        <button @click="open()">删除</button>
      </div>
      <!-- 下方表格 -->
      <div class="down">
        <el-table
          ref="multipleTable"
          :data="tableData3"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="roleName" label="角色名称" align="center">
          </el-table-column>
          <el-table-column prop="roleKey" label="角色字符" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="
                  handleEdit(scope.$index, scope.row),
                    (dialogFormVisible = true)
                "
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 修改弹出层 -->
        <div class="block">
          <el-dialog title="修改" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="用户名称" :label-width="formLabelWidth">
                <input class="inpe" type="text" v-model="model" />
              </el-form-item>
              <el-form-item label="用户字符" :label-width="formLabelWidth">
                <input class="inpe" type="text" v-model="terminalId" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="(dialogFormVisible = false), choose()"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="sizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 添加弹出层 -->
        <div class="add">
          <el-dialog title="添加" :visible.sync="dialogFormVisible1">
            <el-form :model="form">
              <el-col :span="11">
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                  <el-input v-model="form.model" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="用户字符" :label-width="formLabelWidth">
                  <el-input v-model="form.min" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11"> </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible1 = false">取 消</el-button>
              <el-button
                type="primary"
                @click="(dialogFormVisible1 = false), add()"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { RowsApi, RowsAdd, RowsDel } from "../request/api";
export default {
  data() {
    return {
      tableData3: [],
      ele: "",
      newArr: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        //修改
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        // 添加
        min: "",
        model: "",
      },
      formLabelWidth: "120px",
      terminalId: "",
      model: "",
      protocol: "",
      companyType: "",
      gather: "",
      batchNumber: "",
      id: "",
      currentPage: 1,
      total: 0,
      sizes: 10,
      val1: null,
      val2: null,
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    search() {
      RowsApi({ roleName: this.ele }).then((res) => {
        console.log(res);
        this.tableData3 = res.data.data.records;
      });
    },
    del() {
      let arr2 = this.newArr;
      let arr3 = arr2.toString();
      console.log(arr3);
      RowsDel({ id: arr3 }).then((res) => {
        this.msg(res);
        this.getList();
      });
    },
    //当选择时
    handleSelectionChange(val) {
      console.log(val);
      // 获取id
      let newArr = val.map((item) => {
        return item.roleId;
      });
      console.log(newArr);
      this.newArr = newArr;
      console.log(this.newArr);
    },
    //点击编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.id = row.roleId;
      this.terminalId = row.roleKey;
      this.model = row.roleName;
      RowsAdd({
        roleId: this.id,
        roleKey: this.terminalId,
        roleName: this.model,
      }).then((res) => {
        // this.msg(res);
        this.getList();
      });
    },
    //点完修改按钮后
    choose() {
      RowsAdd({
        roleId: this.id,
        roleKey: this.terminalId,
        roleName: this.model,
      }).then((res) => {
        this.msg(res);
        this.getList();
      });
    },
    //点击添加
    add() {
      RowsAdd({ roleKey: this.form.min, roleName: this.form.model }).then(
        (res) => {
          this.msg(res);
          this.getList();
        }
      );
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    //部分更新列表
    getList() {
      RowsApi().then((res) => {
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total
        if(res.data.code ==500){
          alert("登录已过期")
        this.$router.push("/")
      }
      });
    },
    msg(res) {
      if (res.data.code == 0) {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.data.msg,
          type: "error",
        });
      }
    },
    handleSizeChange(val) {
      // console.log(val);
      this.val1 = val
      RowsApi({
        currentPage: this.currentPage,
        pageSize: this.val1,
      }).then((res) => {
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.val2 = val;
      RowsApi({
        currentPage: this.val2,
        pageSize: this.val1,
      }).then((res) => {
        this.tableData3 = res.data.data.records;
      });
    },
    open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
};
</script>

<style scoped lang="less">
.cont {
  width: 100%;
  max-height: 2000px;
  background-color: #fff;
  margin-top: 20px;
  .inp {
    height: 35px;
    width: 40%;
    padding-left: 30px;
    line-height: 35px;
    background-color: #f2fafe;
    border: none;
  }
  .inp::-webkit-input-placeholder {
    color: #acdbef;
  }
  .top {
    margin: 20px 0 0 20px;
    display: flex;
    justify-content: flex-start;
    button {
      margin-right: 10px;
      width: 60px;
      height: 30px;
      border: 2px solid #008ecb;
      color: #008ecb;
      font-size: 12px;
      background-color: #fff;
    }
  }
  .inpe {
    height: 35px;
    width: 40%;
    padding-left: 30px;
    line-height: 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
  }
  .el-table {
    .el-table::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
<style lang='less'>
</style>
